<template>
  <view class="password-wrap">
    <back class="back" :back-title="backTitle"></back>
    <view class="input-list">
      <view class="item" v-for="(item, key) in list" :key="key">
        <view class="title">{{listInfo[key].desc}}</view>
        <input type="password" v-model="list[key]" :placeholder="listInfo[key].placeholder" @focus="handleChangeButton" @blur="handleShowButton">
      </view>
    </view>
    <view v-if="!showButton" class="btn">
			<common-button :btn-title="btnTitle" @submit="handleSubmit"></common-button>
		</view>
  </view>
</template>

<script>
import commonButton from '../../components/button/index'
import {changePassword} from '../../api/login'
export default {
  name: 'password',
  components: {
    commonButton
  },
  data() {
    return {
      backTitle: '修改密码',
			btnTitle: '确认修改',
			showButton: false,
			height: 0,
			list: {
			  userPwd: '',
			  newPwd: '',
			  repet: ''
			},
      listInfo: {
        userPwd: {
          desc: '旧密码：',
          placeholder: ''
        },
        newPwd: {
          desc: '新密码：',
          placeholder: ''
        },
        repet:{
          desc: '确认密码：',
          placeholder: ''
        }
      }
    }
  },
	onLoad() {
		const _this = this
		uni.getSystemInfo({
			success(res){
				_this.height = res.windowHeight
			}
		})
	},
	onReady() {
		const _this = this
		uni.onWindowResize((res) => {
			_this.showButton = res.size.windowHeight < _this.height
		})
	},
	onHide(){
		uni.offWindowResize(()=>{})
	},
	methods: {
		handleChangeButton() {
			this.showButton = true
		},
		handleShowButton() {
			this.showButton = false
		},
		async handleSubmit() {
			const flag = this.validity()
			const {userPwd,newPwd} = this.list
			if(flag) {
				changePassword({userPwd,newPwd})
				uni.showToast({
					title: '修改成功',
					success() {
						uni.removeStorageSync('USER_INFO')
						setTimeout(()=>{
							uni.redirectTo({
								url: '/pages/login/index'
							})
						},1000)
					}
				})
			}
		},
		validity() {
			const {userPwd,newPwd,repet} = this.list
			if (userPwd === '' || newPwd === '' || repet === '') {
				uni.showToast({
					title: '密码不能为空',
					icon: 'none'
				})
				return false
			}
			if (newPwd !== repet) {
				uni.showToast({
					title: '两次密码输入不一致',
					icon: 'none'
				})
				return false
			}
			return true
		}
	}
}

</script>
<style lang='scss' scoped>
.password-wrap{
  width: 100%;
	padding-top: 140upx;
	box-sizing: border-box;
  .back{
    width: 100%;
    position: fixed;
    top: 0;
    left:0;
  }
  .btn{
    position: absolute;
    width: 100%;
    padding: 0 20upx;
    box-sizing: border-box;
    bottom: 52upx;
    left: 0;
  }
  .input-list{
    padding-top: 158upx;
    box-sizing: border-box;
		padding: 0 20upx;
		box-sizing: border-box;
    width: 100%;
    .item{
      height:114upx;
      display: flex;
      align-items: center;
			border-bottom: 1px solid #e1e1e1;
      .title{
        font-size: 30upx;
        color:#999;
        margin-right: 20upx;
				width: 150upx;
				text-align-last: justify;
      }
      input{
        flex: 1;
        padding-right: 10upx;
        box-sizing: border-box;
        height: 100%;
        border: none;
      }
    }
  }
}
</style>